<!--
author: 何其沆(pooky)
desc: Tag封装
date: 2021-11-12
-->
<template>
  <span v-if="item.trim() === 'Phase 0'" class="tag1 phase0">{{ item }}</span>
  <span v-else-if="item.trim() === 'Phase 1'" class="tag1 phase1">{{ item }}</span>
  <span v-else-if="item.trim() === 'Phase 2'" class="tag1 phase2">{{ item }}</span>
  <span v-else-if="item.trim() === 'Phase 3'" class="tag1 phase3">{{ item }}</span>
  <span v-else-if="item.trim() === 'Active'" class="tag1 active">{{ item }}</span>
  <span v-else-if="item.trim() === 'Inactive' || item.trim() === 'Close'" class="tag1 inactive">{{ item }}</span>
  <span v-else class="tag2">
    <a-tooltip placement="top">
      <template #title>
        <span v-if="item.trim() === 'D'">Direct</span>
        <span v-if="item.trim() === 'M'">MLV</span>
        <span v-if="item.trim() === 'L10n'">Localization Business</span>
        <span v-if="item.trim() === 'Data'">AI Data Business</span>
        <span v-if="item.trim() === 'ECI'">EC Innovations</span>
        <span v-if="item.trim() === 'WT'">Wiitrans</span>
      </template>
      {{ item }}
    </a-tooltip>
  </span>
</template>

<script setup>
defineProps({
  item: String
})
</script>

<style scoped lang="less">
.tag1,
.tag2 {
  display: inline-block;
  height: 24px;
  font-size: 12px;
  line-height: 23px;
  text-align: center;
  box-sizing: border-box;
  margin-right: 6px;
}
.tag1 {
  width: 48px;
}
.tag2 {
  min-width: 24px;
  padding: 0 5px;
  border: 1px solid @lighter-gray;
  background-color: @bg-color;
  color: @deep-gray;
}
.phase0 {
  border: 1px solid #beb7b7;
  background-color: #d9cfcf;
  color: #979191;
}
.phase1 {
  border: 1px solid @phase1;
  background-color: @phase1-bg;
  color: #fc8f2f;
}
.phase2 {
  border: 1px solid @phase2;
  background-color: @phase2-bg;
  color: #9fa552;
}
.phase3 {
  border: 1px solid #91dcc0;
  background-color: @phase3-bg;
  color: #61bb99;
}
.active {
  border: 1px solid #cbdcff;
  background-color: #f2f5fe;
  color: @primary-color;
}
.inactive {
  border: 1px solid @lighter-gray;
  background-color: @bg-color;
  color: @deep-gray;
}
</style>
